<template>
  <view class="">
    <view class="container">
      <!-- 左侧分类 -->
      <scroll-view class="category-left" scroll-y>
        <view
          class="category-item"
          v-for="(item, index) in productGroups"
          :key="index"
          :class="{ active: selectedIndex === index }"
          @click="selectCategory(index, item.id)"
        >
          <text class="category-text">{{ item.categoryName }}</text>
        </view>
      </scroll-view>

      <!-- 右侧商品列表 -->
      <scroll-view class="product-right" scroll-y>
        <!-- 顶部图片 -->
        <!-- <image class="top-image" src="/static/top-image.jpg" mode="widthFix"></image> -->

        <!-- 分类展示 -->
        <view
          class="category-content"
          v-for="(group, index) in productGroups"
          :key="index"
        >
          <!-- 分类标题 -->
          <view class="category-title" @click="toggleGroup(index)">
            <text>{{ group.categoryName }}</text>
            <!-- {{ group.show ? '收起' : '展示' }} -->
            <text class="toggle-text">
              <view class="sqBox" v-if="!group.show"> </view>
              <view class="zsBox" v-else> </view>
            </text>
          </view>

          <!-- 商品列表 -->
          <view class="product-list" v-show="!group.show">
            <view
              class="product-item"
              v-for="(product, productIndex) in group.moduleVoList"
              :key="productIndex"
              @click="gotoshopDetail(group, product)"
            >
              <image
                class="product-image"
                :src="product.moduleImgUrl"
                mode="aspectFill"
              ></image>
              <view class="product-nameBox">
                <view class="product-name">
                  <text class="product-name1">{{ product.moduleName }}</text>
                  <image
                    v-if="product.isHot"
                    :src="product.hotImg"
                    mode="aspectFit"
                  ></image>
                </view>
                <text class="product-name2">{{ product.moduleBlurb }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      selectedIndex: 0, // 默认选中第一个分类
      productGroups: [],
    };
  },
  onShow() {
    this.getData();
  },
  methods: {
    switchTabs(value) {
      // 切换按钮
      this.activeTabs = value;
    },
    getData() {
      uni.app.post(
        "/forum/note/getCategories",
        {
          authorId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          console.log(res.data);
          this.productGroups = res.data;
        },
      );
    },
    selectCategory(index, id) {
      this.selectedIndex = index; // 更新选中的分类索引
    },
    toggleGroup(index) {
      this.$set(
        this.productGroups[index],
        "show",
        !this.productGroups[index].show,
      );
    },
    gotoshopDetail(group, product) {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = {
            hideNavBar: "1",
            hideTotalNavBar: "0",
            hideBottomSafeBar: "0",
            url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/community/communityList?categoryId=${group.id}&moduleId=${product.id}`,
          };
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.pushNewWebVC(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.pushNewWebVC.postMessage({
            hideNavBar: "1",
            hideTotalNavBar: "0",
            hideBottomSafeBar: "0",
            url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/community/communityList?categoryId=${group.id}&moduleId=${product.id}`,
          });
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
  // background-color: red;
}

.topBox {
  padding: 24rpx;
  // width: 100%;
  position: fixed;
  top: 0%;
  left: 0;
  display: flex;
  align-items: center;
  height: 60rpx;
  background-color: #ffffff;
  z-index: 111;

  .leftSetBox image {
    width: 48rpx;
    height: 48rpx;
  }

  .rightSearchBox image {
    width: 48rpx;
    height: 48rpx;
  }

  .topList {
    margin: 0 24rpx 0 32rpx;
    display: flex;
    align-items: center;

    .tabsBox {
      white-space: nowrap;
      background-color: #ffffff;
      font-weight: 400;
      font-size: 28rpx;
      color: #bfbfbf;
      text-align: center;
      height: 48rpx;
      line-height: 48rpx;
      padding: 0 26rpx;
      margin-right: 16rpx;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
    }

    .actTabsBox {
      white-space: nowrap;
      background-color: #d9f700;
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
      text-align: center;
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      padding: 0 60rpx;
    }
  }
}

.container {
  // margin-top: 100rpx;
  display: flex;
  height: 100vh;
  /* 占满整个屏幕高度 */
}

.category-left {
  width: 100rpx;
  background: #ffffff;
  height: 100vh;
  overflow-y: auto;
}

.category-item {
  height: 240rpx;
  /* 分类项高度 */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  // border-bottom: 1px solid #ddd;
  font-weight: 400;
  font-size: 28rpx;
  color: #303030;
}

.category-text {
  width: 60rpx;
  /* 限制文字宽度 */
  text-align: center;
  word-wrap: break-word;
  /* 允许在单词内换行 */
  white-space: normal;
  /* 允许换行 */
}

.category-item.active {
  background-color: #d9f700;
  border-radius: 0rpx 16rpx 16rpx 0rpx;
  font-weight: bold;
  font-size: 30rpx;
  color: #303030;
  /* 选中状态的背景颜色 */
}

.product-right {
  flex: 1;
  /* 占据剩余宽度 */
  // background-color: #fff;
  background-color: #f8f8f8;
}

.top-image {
  width: 100%;
  display: block;
}

.category-content {
  padding: 16rpx 30rpx 16rpx 40rpx;
}

.category-title {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 30rpx;
  color: #303030;
  line-height: 40rpx;
  text-align: left;
  margin-bottom: 16rpx;
}

.toggle-text {
  margin-left: 16rpx;
}

.sqBox {
  /* 箭头颜色 */
  width: 0;
  height: 0;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-top: 10rpx solid #303030;
}

.zsBox {
  width: 0;
  height: 0;
  border-top: 10rpx solid transparent;
  border-bottom: 10rpx solid transparent;
  border-left: 10rpx solid #303030;

  /* 箭头颜色 */
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;

  /* 商品之间的间距 */
}

.product-item {
  width: calc(50% - 16rpx);
  /* 每行两个商品，减去间距 */
  // border: 1px solid #ddd;
  border-radius: 10rpx;
  overflow: hidden;
  background-color: #ffffff;
}

.last-item {
  width: 100%;
  /* 如果是单数商品，占满一行 */
}

.product-image {
  width: 100%;
  height: 144rpx;
  display: block;
}

.product-nameBox {
  padding: 16rpx;
}

.product-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-name image {
  width: 24rpx;
  height: 24rpx;
}

.product-name1 {
  font-weight: bold;
  font-size: 28rpx;
  color: #303030;
}

.product-name2 {
  font-weight: 400;
  font-size: 20rpx;
  color: #7f7f7f;
}
</style>
